<template>
  <div class="search">
    <el-input
      v-model="input1"
      :placeholder="placeholder1"
      clearable
      class="input_item"
    />
    <div class="btn">
      <el-button type="primary" @click="toSearch">搜索</el-button>
      <el-button type="info" @click="reset">重置</el-button>
    </div>
  </div>
</template>

<script lang="ts">
import { ref, Ref, onMounted } from "vue";

export default {
  name: "Search",
  props: {
    placeholder1: {
      type: String,
      default: () => "请输入内容",
    },
  },
  setup(props, { emit }) {
    const input1: Ref<string> = ref("");

    //挂载初始化数据
    onMounted(() => {
      input1.value = props.value1;
    });

    //开始搜索
    const toSearch = () => {
      emit("toSearch", { keyWords: input1.value });
    };

    //定义重置按钮
    const reset = () => {
      input1.value = "";
      emit("reFresh", null);
    };

    return {
      input1,
      toSearch,
      reset,
    };
  },
};
</script>

<style scoped>
.search {
  box-sizing: border-box;
  float: left;
  display: flex;
  align-items: center;
  width: 46%;
  height: 50px;
}
.input_item {
  float: left;
  width: 60%;
  height: 40px;
}
.btn {
  margin-left: 15px;
}
</style>